<template>
  <div>
    <h1>待开发</h1>
    <div class="main1">
      <!-- <div class="block">
        <span class="demonstration">搜索</span>
        <el-cascader
          v-model="int"
          @change="change"
          placeholder="搜索"
          :options="options"
          :props="{ multiple: true }"
          filterable
        ></el-cascader>
      </div> -->
      <div style="width: 300px">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
        <el-tree
          ref="tree"
          default-expand-all
          :filter-node-method="filterNode"
          :data="options"
          show-checkbox
          @node-click="getNode"
          node-key="value"
          @check-change="changeNode"
          :default-checked-keys="userId"
        >
        </el-tree>
      </div>
      <div class="tree2" style="width: 300px; margin-left: 50px" v-show="tree">
        <el-tree ref="tree2" :data="options1" node-key="value" default-expand-all show-checkbox> </el-tree>
      </div>
    </div>
    <div>
      <div class="block">
        <span class="demonstration">多选可搜索</span>
        <el-cascader
          ref="cascader"
          placeholder="试试搜索：指南"
          :show-all-levels="false"
          :options="options"
          :props="{ multiple: true }"
          filterable
          :key="isResouceShow"
          @change="onhouChange"
          v-model="houArr"
        ></el-cascader>
      </div>
    </div>
    <div>
      <h1>动态加载</h1>
      <el-cascader :props="props" :multiple="true" filterable></el-cascader>

            <el-button size='mini' type="text" @click="getDetail(scope.row)">删除</el-button>
    </div>
    <div>
      <el-button type="primary" @click="add">点击</el-button>
      <el-button type="text" @click="detail">回显</el-button>
    </div>
    <div class="main" v-for="item in tabs" :key="item.id" @click="getadd(item.id)">{{ item.name }}</div>
    <div class="swiper">
      <transition name="fadeIn" mode="out-in">
        <div class="box" v-if="index == 1" v-cloak>23</div>
      </transition>
      <transition name="fadeIn" mode="out-in">
        <div class="box1" v-if="index == 2" v-cloak></div>
      </transition>
    </div>
    <el-form :rules="addRule" label-width="100px" class="demo-ruleForm">
      <el-form-item label="年龄" prop="fileList">
        <el-input type="age" v-model="fileList" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <transition name="fadeIn" mode="out-in">
      <div class="box2" ref="refs1">
        <div id="box" v-for="item in data" :key="item"></div>
      </div>
    </transition>
  </div>
</template>
<script>
import mixin from './admin/admin'
let id = 0
import { mapActions } from 'vuex'
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  data() {
    return {
      options1: [],
      filterText: '',
      houArr: [],
      isResouceShow: '',
      tabs: [
        { id: 1, name: '全部' },
        { id: 2, name: '未选中' }
      ],
      int: '',
      index: 1,
      data: [1, 2, 3, 4],
      tree: false,
      // options: [
      //   { value: '0', label: '公司', children: [{ value: '1', label: '震坤行' }] },
      //   {
      //     value: '2',
      //     label: '用户',
      //     children: [
      //       { value: '5', label: '张珊' },
      //       { value: '3', label: '刘颖' },
      //       { value: '4', label: '叶樉' },
      //     ],
      //   },
      //   {
      //     value: '6',
      //     label: '什么',
      //     children: [{}],
      //   },
      // ],
      options: [
        {
          value: 0,
          label: '公司'
        },
        { value: 1, label: '社区' },
        { value: 2, label: '博客' }
      ],
      // options: [],
      userId: [],
      dataList: [
        { value: '4', label: '叶樉' },
        { value: '3', label: '刘颖' }
      ],
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          console.log(node)
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2
            }))
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }, 1000)
        }
      }
    }
  },
  // methods: {
  //   ...mapActions(['getSubmit']),
  //   filterNode(value, data) {
  //     if (!value) return true
  //     return data.label.indexOf(value) !== -1
  //         value: '指南', label: '公司', children: [
  //           { value: '1', label: '震坤行' }]
  //       },
  //       {
  //         value: '2', label: '用户', children: [
  //           { value: '5', label: '张珊' }, { value: '3', label: '刘颖' },
  //           { value: '4', label: '叶樉' }]
  //       }
  //     ],
  //     userId: [],
  //     dataList: [{ value: '4', label: '叶樉' }, { value: '3', label: '刘颖' }],
  //     addRule: {
  //       'fileList': [{ validator: this.validateRole, trigger: 'blur' }]
  //     },
  //     fileList: ''
  //   }
  // },
  methods: {
    validateRole(rule, value, callback) {
      if (this.fileList.length <= 0) {
        callback(new Error('请上传文件'))
      } else {
        callback()
      }
    },
    getadd(id) {
      this.index = id
      var a = document.getElementById('box')
      // this.antimon(a,150)
      for (let i = 0; i <= 100 * id; i++) {
        setInterval(() => {
          this.$refs.refs1.scrollLeft = i
        }, 15)
      }
    },
    callbacks() {
      const obj = {}
      obj.time = setInterval(() => {}, 15)
    },
    antimon(obj, tatget, callback) {
      console.log(obj.style.scrollLeft)
      clearInterval(obj.time)
      obj.time = setInterval(function() {
        var step = (tatget - obj.pageXOffset) / 10
        step = step > 0 ? Math.ceil(step) : Math.floor(step)
        if (obj.pageXOffset === tatget) {
          clearInterval(obj.time)
        }
        window.scroll(0, obj.pageXOffset + step)
      }, 15)
    },
    getscroll() {
      this.$refs.refs1.scrollLeft = 100
    },
    change(e) {
      console.log(this.int, e)
    },
    add() {
      this.houArr = [[6], [2, 5]]
      console.log(this.$refs.cascader.getCheckedNodes(true))
      console.log(this.$refs.cascader.getCheckedNodes())
    },
    onhouChange(text) {
      ++this.isResouceShow
      console.log(text, this.houArr)
    },
    detail() {
      this.$nextTick(() => {
        // this.userId.push(2)
        // this.$set(this.userId,2)
        //  this.$refs.tree.setCheckedKeys([{value:'3',label:'刘颖'}],true)
        this.$refs.tree.setChecked({ value: 5 }, true)
        this.$refs.tree.setChecked({ value: 3 }, true)
      })
    },
    changeNode(node) {
      console.log(node)
      this.options1 = [{ value: 0, label: '震坤行' }]
      this.tree = true
      //  console.log(node.value)
      // this.dataList.push(node)
      // this.dataList.filter(item=>{
      //   if(item.value!=node.value){
      // return  this.dataList.push(node)
      //   }else{
      //     this.dataList.push(node)
      //   }
      // })
    },
    getNode(node) {
      console.log(node)
    },
    getDetail(e) {
      this.$refs.tree.setChecked({ value: e.value }, false)
      console.log()
      this.dataList = this.dataList.filter((item) => {
        return e.value !== item.value
      })
      // this.dataList.forEach(item=>{
      //   this.$refs.tree.setChecked(item.value,false)
      // })
      console.log(e)
    }
  },
  mounted() {
    window.addEventListener('scrollX', this.getscroll)
    this.getSubmit({ params: 1 })
  }
}
</script>
<style lang="less" scoped>
[v-cloak] {
  display: none;
}
.main {
  width: 70px;
  height: 40px;
  // display: flex;
  background: #069974;
  text-align: center;
  line-height: 40px;
  margin: 20px;
  border-radius: 5px;
}
.box {
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url('https://dbyxs.xyz:3006/uploads/e0980aa9268f25cdee7000f90000dacf');
  background-size: 100% 100%;
  position: relative;
  // transition: all .5s ease-in-out;
  // animation: identifier .5s linear;
}
.box1 {
  width: 200px;
  height: 300px;
  position: relative;
  border: 1px solid #ccc;
  background-image: url('https://dbyxs.xyz:3006/uploads/84c13e182800e4d9362878e420b723cc');
  background-size: 100% 100%;
  // animation: identifier .5s linear;
}
@keyframes identifier {
  0% {
    transform: translateX(25%);
  }
  25% {
    transform: translateX(50%);
  }
  50% {
    transform: translateX(75%);
  }
  100% {
    transform: translateX(100%);
  }
}
.fadeIn-enter,
.fadeIn-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.fadeIn-enter-to,
.fadeIn-leave {
  opacity: 1;
  transform: translateX(0%);
}
.fadeIn-enter-active,
.fadeIn-leave-active {
  transition: all 0.3s ease-in;
}
// .fadeIn-enter,.fadeIn-leave-active {
//     transform: translateX(-100%);
// }
// .fadeInleave-active{
//     transition-duration: .3s;
//     transition-property: transform
// }

//   .fadeIn-enter{
//       transform: translateX(100%)
//   }

//   .fadeIn-leave-to{
//        transform: translateX(-40%)
//   }

//   .fadeIn-enter{
//       transform: translateX(-100%)
//   }

//   .fadeIn-leave-to{
//       transform: translateX(100%)
//   }
.swiper {
  width: 600px;
  display: flex;
  flex-direction: row;
}
.box2 {
  width: 375px;
  border: 1px solid red;
  height: 50px;
  display: flex;
  display: -webkit-box;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: initial;
  transition: all 0.5s ease-in;
  > div {
    width: 200px;
    height: 100%;
  }
  > :nth-child(1) {
    background: blue;
  }
  > :nth-child(2) {
    background: pink;
  }
  > :nth-child(3) {
    background: green;
  }
  > :nth-child(4) {
    background: #007aff;
  }
}

// /deep/.el-tree-node > .el-tree-node__children {
//   position: fixed;
//   left: 300px;
// }
.main1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.tree2 {
  position: fixed;
  left: 15%;
}
</style>

